<template>
  <div class="ObtainShells">
    <navigation image_='0' title="福利中心" :show="show_zi" :scrollTop="true" v-on:show="zidingyi($event)">
      <template slot="tishi">
        <img @click="tomybackpack" src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_help_icon.png"
          alt="" />
      </template>
    </navigation>
    <div class="top_header_title">
      <img class="poab" src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_bg.png" alt="">
      <div class="back_" @click="backAciton">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_fanhui_icon.png" alt="">
      </div>
      <div class="explain" @click="tomybackpack">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_help_icon.png" alt="">
      </div>
      <img class="title_center" src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_title_text.png"
        alt="">
      <div class="CountingCoupons">海量点券 等你来拿</div>
    </div>
    <!-- 签到 -->
    <div class="singnIn">
      <div class="sin_top_title">
        <span>累计签到{{totalDays}}天</span>
        <div>
          <span>签到提醒</span>
          <van-switch v-model="openAlert" size="20px" @input="switch_" />
        </div>
      </div>
      <div class="sign_list_qd">
        <div v-for="item,index in signList" :key="index"
          :style="item.is_today == '1' && item.status == '0'?'background: linear-gradient(180deg, #DAD6FB 0%, #FAF9FF 100%);':''">
          <span v-if="item.status == '1'" style="color:#999999">已签到</span>
          <span v-else-if="item.status == '0' && item.is_today == '1'">今日可领</span>
          <span v-else>第{{item.days}}天</span>
          <img v-if="item.days != '7'"
            src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_shell_img.png" alt="">
          <div class="img_7" v-else>
            <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_shell_img.png" alt="">
            <div>
              <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/halo_img.png" alt="">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/box_prize_gift.png" alt="">
            </div>
          </div>
          <span v-if="index != '6'" :style="item.status == '1'?'color:#999999':'color: #000000;'">+{{item.money}}</span>
          <div class="text_7" v-else>
            <span :style="item.status == '1'?'color:#999999':'color: #000000;'">+{{item.money}}</span>
            <span :style="item.status == '1'?'color:#999999':'color: #000000;'">神秘宝箱</span>
          </div>
        </div>
      </div>
      <div class="SignIn" @click="signIn_">
        {{status_=='1'?"今日已签到":"签到"}}
      </div>
    </div>

    <!-- 我的贝壳 -->
    <div class="shells">
      <div class="box_she">
        <div class="left_she">
          <span>我的贝壳</span>
          <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/shell_small.png" alt="">
          <span>{{gold}}</span>
        </div>
        <div class="right_she" @click="detailed">
          <span>贝壳明细</span>
          <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/fanhui_icon.png" alt="">
        </div>
      </div>
    </div>
    <!-- 赚贝壳 -->
    <div class="EarnShells">
      <van-tabs v-model="active" animated>
        <van-tab title="赚贝壳">
          <div class="task" v-if="singleTaskList.length"><span>单次任务</span></div>
          <div class="list_task">
            <div v-for="item,index in singleTaskList" :key="index" class="Singletask">
              <div class="left_rw">
                <div class="icon_one"><img :src="item.icon" alt="">
                </div>
                <div class="center_details">
                  <span>{{item.name}}</span>
                  <div>
                    <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/shell_small.png" alt="">
                    <span>+{{item.gold}}</span>
                  </div>
                </div>
              </div>
              <div class="right_rw">
                <div v-if="item.status==0" class="status1" @click="openapp(item.type)">
                  去完成
                </div>
                <div v-if="item.status==1" class="status2" @click="getTaskPrize('1',item.type)">
                  领取
                </div>
                <div v-if="item.status==2" class="status3">
                  已领取
                </div>
              </div>
            </div>
          </div>
          <div class="task task_two">
            <div><span>每日任务</span><span>每日进行刷新</span></div>
          </div>
          <div class="list_task">
            <div v-for="item,index in dailyTaskList" :key="index" class="Singletask">
              <div class="left_rw">
                <div class="icon_one"><img :src="item.icon" alt="">
                </div>
                <div class="center_details">
                  <span>{{item.name}}</span>
                  <div>
                    <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/shell_small.png" alt="">
                    <span>+{{item.gold}}</span>
                  </div>
                </div>
              </div>
              <div class="right_rw">
                <div v-if="item.status==0" class="status1" @click="openapp(item.type)">
                  去完成
                </div>
                <div v-if="item.status==1" class="status2" @click="getTaskPrize('2',item.type)">
                  领取
                </div>
                <div v-if="item.status==2" class="status3">
                  已领取
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="花贝壳">
          <div class="notice">
            <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/box_laba_icon.png" alt="">
            <van-swipe vertical class="notice-swipe van-ellipsis" :autoplay="3000" :show-indicators="false">
              <van-swipe-item v-for="item,index in lotterPrizeLog" :key="index">
                恭喜{{splice_(item.nickname)}}抽中了{{item.gift_name}}
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="probability" @click="probability_">
            <span>奖品概率</span>
            <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/fanhui_icon.png" alt="">
          </div>
          <div class="box_gift">
            <img v-if="lottie_" src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/box_prize_gift.png"
              alt="">
            <lottie v-else :options="defaultOptions" v-on:animCreated="handleAnimation" :width="380" :height="380" />
          </div>
          <div class="btn_xinyun">
            <div class="btn_gift_an" @click="lucky_chou">
              <span>幸运抽奖</span>
              <span>200贝壳开启一次</span>
            </div>

          </div>
          <div class="srcoly">
            <div class="list_prize">
              <div class="list_box" v-for="item,index in lotteryPrizeList" :key="index">
                <img :src="item.gift_pic" alt="">
                <div class="van-ellipsis" v-if="item.gift_name.length<8">
                  <div>{{item.gift_name}}</div>
                </div>
              </div>
            </div>
            <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/mengban_img.png" alt="">
          </div>
          <div class="shop_record">
            <span>兑换商店</span>
            <span @click="myexchange_1">兑换记录</span>
          </div>
          <div class="shop_duih">
            <div v-for="item,index in exchangePrizeList" :key="index" @click="exchange_shop(item)">
              <div class="gift_value">
                <img :src="item.gift_pic" alt="">
                <span>{{item.gift_name}}</span>
                <span v-if="item.money>0">{{item.money}}钻礼物</span>
              </div>
              <div class="value_lis">
                <div>
                  <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/shell_small.png" alt="">
                  <span>x{{item.gold}}</span>
                </div>
                <span>兑换</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="poab_myPrize" @click="myPrize">我的奖品</div>
    </div>
    <van-popup v-model="Popup" round @closed="closePopup" :close-on-click-overlay="overlayclick">
      <div class="popup_model">
        <!-- 头标 -->
        <div class="top_model_title" v-if="model_title != 'Tips'">
          <span v-if="model_title== 'shouming'">活动说明</span>
          <span v-if="model_title== 'signIn_pirze'">签到成功</span>
          <span v-if="model_title== 'conchLog'">使用记录</span>
          <span v-if="model_title== 'myPrize'">我的奖品</span>
          <span v-if="model_title== 'probability_'">奖品概率</span>
          <span v-if="model_title== 'myexchange_duix'">兑换记录</span>
          <span v-if="model_title== 'luckLottery'">恭喜获得</span>
        </div>
        <!-- 说明内容 -->
        <div class="center_miaos" v-if="model_title=='shouming'">
          <span>1、<span>每日签到：通过每日签到可以获得贝壳等虚拟奖品；</span></span>
          <span>2、<span>单次任务：单次任务获得对应贝壳；每个账号只能完成一次；</span></span>
          <span>3、<span>每日任务：完成每日任务可以获得贝壳；</span> </span>
          <span>4、<span>贝壳：贝壳可以进行奖品兑换与幸运抽奖<br /> · 装扮、礼物等奖品抽中后发放到账户中；
              <br /> · 游戏皮肤：将由客服统一发放；</span></span>
          <span>5、<span>为保证活动的公平性，不得通过任何方式作弊，一经发现将取消活动资格；</span></span>
          <span v-if="isiOS">6、<span>本活动与苹果公司无关；</span> </span>
          <span>{{isiOS?'7':'6'}}、<span>法律许可范围内，本次活动最终解释权归声贝所有。</span> </span>

        </div>
        <!-- 开启提示 -->
        <div class="SystemPrompt" v-if="model_title=='Tips'">
          <div class="ba_img">
            <div class="mode_lis">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/kaiguan_img.png" alt="">
              <div>
                <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/logo.png" alt="">
                <span>快来签到领好礼~</span>
              </div>
              <span>签到赢荣耀典藏皮肤,海量点券,等你来拿~</span>
            </div>
          </div>
          <div class="tips_">
            <div>提示</div>
            <span>开启系统通知后才能开启签到提醒通知</span>
            <div @click="opensingin">去开启</div>
          </div>
        </div>
        <!-- 签到奖励 -->
        <div class="signIn_pirze" v-if="model_title=='signIn_pirze'">
          <div class="list_signin_prize" v-if="signIn_pirze.length=='1'">
            <div class="one_prize_gift">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/halo_img.png" alt="">
              <img :src="signIn_pirze[0].gift_pic" alt="">
            </div>
            <span>{{signIn_pirze[0].gift_name}}</span>
            <div class="my_zdl" @click="close_model">我知道了</div>
            <span>签到第{{days}}天奖励</span>
          </div>
          <div class="list_signin_prize" v-else>
            <div class="one_prize_gift3">
              <div v-for="item,index in signIn_pirze" :key="index">
                <div class="prize_bj">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/halo_img.png" alt="">
                  <img :src="item.gift_pic" alt="">
                </div>
                <span class="van-multi-ellipsis--l2">{{item.gift_name}}</span>
              </div>
            </div>
            <div class="my_zdl" @click="close_model">我知道了</div>
            <span class="name_gift">签到第{{days}}天奖励</span>

          </div>
        </div>
        <!-- 使用记录 -->
        <div class="conchLog" v-if="model_title=='conchLog'">
          <div class="labe_header">
            <span>时间</span>
            <span>类型</span>
            <span>贝壳</span>
          </div>
          <div class="list_con1" @scroll="scrollEvent">
            <van-list v-model="loading" :finished="finished" :finished-text="conchLog.length<'10'?'':'没有更多了'">
              <div v-for="item,index in conchLog" :key="index" class="list_conlog">
                <span>{{item.add_time}}</span>
                <span>{{item.type}}</span>
                <span>{{item.money}}</span>
              </div>
            </van-list>
          </div>
        </div>
        <!-- 奖品概率 -->
        <div class="probability_" v-if="model_title=='probability_'">
          <div class="labe_header">
            <span>奖品名称</span>
            <span>中奖概率</span>
          </div>
          <div class="list_con1">
            <div v-for="item,index in lotteryPrizeList" :key="index" class="list_conlog">
              <span>{{item.gift_name}}</span>
              <span>{{item.probability}}</span>
            </div>
          </div>
        </div>
        <!-- 我的奖品 -->
        <div class="myPrize" v-if="model_title=='myPrize'">
          <div class="active_tab">
            <div :class="luckdraw =='1'?'active_':''" @click="myPrize_">我的抽奖</div>
            <div :class="luckdraw =='2'?'active_':''" @click="myexchange_">我的兑换</div>
          </div>
          <div class="labe_header" v-if="luckdraw =='1'">
            <span>奖品名称</span>
            <span>状态</span>
          </div>
          <div class="labe_header" v-else>
            <span>时间</span>
            <span>兑换奖品</span>
            <span>消耗贝壳</span>
          </div>
          <div class="list_con1" @scroll="scrollEventprize" v-if="luckdraw =='1'">
            <van-list v-model="loading" :finished="finished" :finished-text="luck_yDraw.length<'10'?'':'没有更多了'">
              <div v-for="item,index in luck_yDraw" :key="index" class="list_conlog">
                <span>{{item.gift_name}}</span>
                <span>{{item.status}}</span>
              </div>
            </van-list>
          </div>
          <div class="list_con1" @scroll="scrollEventexchange" v-else>
            <van-list v-model="loading" :finished="finished" :finished-text="my_exchange.length<'10'?'':'没有更多了'">
              <div v-for="item,index in my_exchange" :key="index" class="list_conlog">
                <span>{{item.add_time}}</span>
                <span>{{item.gift_name}}</span>
                <span>{{item.gold}}</span>
              </div>
            </van-list>
          </div>
        </div>
        <!-- 兑换记录 -->
        <div class="conchLog" v-if="model_title=='myexchange_duix'">
          <div class="labe_header" v-if="my_exchange.length">
            <span>时间</span>
            <span>兑换奖品</span>
            <span>消耗贝壳</span>
          </div>
          <div class="list_con1" @scroll="scrollEventexchange" v-if="my_exchange.length">
            <van-list v-model="loading" :finished="finished" :finished-text="my_exchange.length<'10'?'':'没有更多了'">
              <div v-for="item,index in my_exchange" :key="index" class="list_conlog">
                <span>{{item.add_time}}</span>
                <span>{{item.gift_name}}</span>
                <span>{{item.gold}}</span>
              </div>
            </van-list>
          </div>
          <div class="NoDatamy_exchange" v-else>
            <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/empty_img.png" alt="">
            <span>暂无数据</span>
          </div>
        </div>
        <!-- 恭喜获得 -->
        <div class="signIn_pirze" v-if="model_title=='luckLottery'">
          <div class="list_signin_prize">
            <div class="one_prize_gift">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/halo_img.png" alt="">
              <img :src="luckLottery.gift_pic" alt="">
            </div>
            <span class="luckLo_name">{{luckLottery.gift_name}}</span>
            <span>{{luckLottery.gift_desc}}</span>
          </div>
        </div>
        <!-- 关闭按钮 -->
        <div class="model_close" @click="close_model" v-if="model_title != 'signIn_pirze'">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/popup_close_icon.png" alt="">
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from '../../components/navigation'

  import * as animationData from "../../assets/lottie/data.json";
  import wx from 'weixin-js-sdk'
  export default {
    data() {
      return {
        openAlert: false, //签到
        active: 0, //0赚贝壳1花贝壳
        Popup: false, //弹窗
        model_title: '', //Tips签到提示 shouming活动说明 signIn_pirze签到奖励 conchLog签到奖励 probability_奖品概率
        dailyTaskList: [], //每日任务
        days: 0, //签到天数
        gold: 0, //我的贝壳
        exchangePrizeList: [], //奖品商店
        lotteryPrizeList: [], //奖品概率
        singleTaskList: [], //单次任务
        lotterPrizeLog: [], //中奖人员
        totalDays: '', //总签到次数
        signList: [], //签到天数
        signIn_pirze: [], //签到奖励
        page: 1, //贝壳明细分页
        conchLog: [], //贝壳明细数据
        luckLottery: {}, //抽奖奖品

        luck_yDraw: [], //我的抽奖
        my_exchange: [], //我的兑换
        loading: false,
        finished: false,
        luckdraw: '1', //1我的抽奖2我的兑换
        overlayclick: false, //默认点击遮罩层不关闭弹窗

        defaultOptions: {
          animationData: animationData,
          loop: false,
        },
        animationSpeed: 1,
        anim: {},
        lottie_: true, //true静态图false lottie
        SignInremind_: 0, //0失败1成功开启签到提醒

        // navList: [], //单次任务
        show_zi: false,
        scrollTop_zi: true,
        isiOS: false,
        status_: 0,
      };
    },
    components: {
      navigation
    },
    created() {
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      this.index();
    },
    methods: {
      backAciton() {
        this.$.backAciton()
        // var ua = navigator.userAgent.toLowerCase(); //微信小程序 
        // if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //   wx.miniProgram.navigateBack({
        //     delta: 1
        //   })
        // } else {
        //     if (window.isiOS) {
        //       console.log("iOS返回事件");
        //       window.webkit.messageHandlers.backAction.postMessage({});
        //     } else {
        //       console.log("安卓返回事件");
        //       app.backAction();
        //     }
        // }
      },
      zidingyi(msg) {
        this.show_zi = msg
      },
      handleAnimation(anim) {
        this.anim = anim;
        console.log(this.anim); //这里可以看到 lottie 对象的全部属性
      },
      lucky_chou() {
        if (this.gold < 200) {
          return Toast("贝壳不足")
        }
        this.lottie_ = false;
        let arys = {}; //参数
        let url = "/sign/luckLottery";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.anim.addEventListener('complete', () => {
              this.Popup = true;
              this.model_title = 'luckLottery'; //抽奖
              this.lottie_ = true;
              this.luckLottery = res.data.result
            }, 0)
            this.index()
          } else {
            Toast(res.data.text);
          }
        });
      },
      //打开模态框
      myPrize() {
        this.Popup = true;
        this.model_title = 'myPrize';
        this.myPrize_()
      },
      //切换我的抽奖
      myPrize_() {
        this.page = 1;
        this.luckdraw = '1';
        this.luck_yDraw = [];
        this.myPrize_index();
      },
      //切换我的兑换
      myexchange_() {
        this.page = 1;
        this.luckdraw = '2';
        this.my_exchange = [];
        setTimeout(() => {
          this.myexchange_index()
        }, 300)
      },
      //俺的兑换
      myexchange_1() {
        this.Popup = true;
        this.model_title = 'myexchange_duix';
        this.page = 1;
        this.my_exchange = [];
        this.myexchange_index()
      },
      myPrize_index() {
        let arys = {
          page: this.page,
        }; //参数
        let url = "/sign/myPrizeLog";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            if (res.data.result.list.length) {
              this.luck_yDraw = this.luck_yDraw.concat(res.data.result.list);
              this.page++;
              if (res.data.result.list.length < 10) {
                this.finished = true;
              }
            } else {
              this.finished = true;
            }
          } else {
            Toast(res.data.text);
          }
        });
      },
      myexchange_index() {
        let arys = {
          page: this.page,
        }; //参数
        let url = "/sign/myExchangeLost";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            if (res.data.result.list.length) {
              this.my_exchange = this.my_exchange.concat(res.data.result.list);
              this.page++;
              if (res.data.result.list.length < 10) {
                this.finished = true;
              }
            } else {
              this.finished = true;
            }
          } else {
            Toast(res.data.text);
          }
        });
      },
      scrollEventprize(e) {
        if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
          // 加载状态结束
          this.loading = true;
          this.finished = false;
          this.myPrize_index()
        }
      },
      scrollEventexchange(e) {
        if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
          // 加载状态结束
          this.loading = true;
          this.finished = false;
          this.myexchange_index()
        }
      },
      scrollEvent(e) {
        if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
          // 加载状态结束
          this.loading = true;
          this.finished = false;
          this.detailed()
        }
      },
      probability_() {
        this.Popup = true;
        this.model_title = "probability_"
      },
      signInRemind(SignInremind_) {
        this.SignInremind_ = SignInremind_
      },
      switch_(value) {
        if (value) {
          this.openAlert = false;
          if (window.isiOS) {
            window.signInRemind = this.signInRemind;
            window.webkit.messageHandlers.signInRemind.postMessage({});
            if (this.SignInremind_ == '1') {
              this.openAlert = true;
              this.openAlert_("1")
            } else {
              this.openAlert = false;
            }
          } else {
            let Android = app.signInRemind()
            if (Android == '1') {
              this.openAlert = true;
              this.openAlert_("1")
            }
          }
        } else {
          this.openAlert_("0")
          this.openAlert = false;
        }
      },
      openAlert_(status) {
        let arys = {
          status: status
        }; //参数
        let url = "/sign/openAlert";
        this.$.encryption2(arys, url).then((res) => {
          Toast(res.data.text);
        });
      },
      close_model() {
        this.finished = true;
        this.overlayclick = false;
        this.Popup = false;
        // this.model_title = '';
      },
      tomybackpack() {
        this.Popup = true;
        this.model_title = "shouming"
      },
      //签到
      signIn_() {
        this.overlayclick = true;
        let arys = {}; //参数
        let url = "/sign/signIn";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.model_title = 'signIn_pirze',
              this.Popup = true;
            this.days = res.data.result.days;
            this.signIn_pirze = res.data.result.prize_list;
            this.index()
          } else {
            Toast(res.data.text);
          }
        });
      },
      splice_(value) {
        let slice2 = "";
        if (value.length > 6) {
          slice2 = value
          slice2 = slice2.slice(0, 5)
          return slice2 + '...';
        } else {
          return value
        }
      },
      closePopup() {
        this.page = 1;
        this.conchLog = []; //明细
        this.model_title = '';
        this.finished = true;
        this.overlayclick = false;
      },



      //贝壳明细
      detailed() {
        let arys = {
          page: this.page,
        }; //参数
        let url = "/sign/conchLog";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.Popup = true;
            this.model_title = 'conchLog';
            if (res.data.result.list.length) {
              this.conchLog = this.conchLog.concat(res.data.result.list);
              this.page++;
              this.finished = true;
            } else {
              // 数据全部加载完成
              this.finished = true;
            }
          } else {
            Toast(res.data.text);
          }
        });
      },

      //兑换奖励
      exchange_shop(item) {
        let _ = this;
        Dialog.confirm({
            title: "兑换奖品",
            message: "确认消耗" + item.gold + "贝壳兑换" + item.gift_name + "吗?",
            beforeClose,
            confirmButtonColor: "#0659FF",
            cancelButtonColor: "A8ABAE"
          })
          .then(() => {
            _.exchangePrize(item);
          })
          .catch(() => {
            // console.log("取消");
          });

        function beforeClose(action, done) {
          if (action === "confirm") {
            setTimeout(done, 500);
          } else {
            done();
          }
        }
      },

      exchangePrize(item) {
        let arys = {
          prizeId: item.id
        }; //参数
        let url = "/sign/exchangePrize";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            Toast(res.data.text);
            this.index()
          } else {
            Toast(res.data.text);
          }
        });
      },

      openapp(type) {
        let isIOS = window.isiOS;
        let tabIndex = "";
        if (window.isWeixin) {
          if (type == "send_index") {
            tabIndex = 0
            wx.miniProgram.switchTab({url: "/pages/index/index"}); //首页
          } else if (type == "reply_record") {
            tabIndex = 1
            Toast("小程序暂不支持跳转动态")
          } else if (type == "message") {
            tabIndex = 2
            wx.miniProgram.switchTab({url: "/pages/message/message"}); //消息
          } else if (type == "my_core") {
            tabIndex = 3
            wx.miniProgram.switchTab({url: "/pages/my_home/my_home"}); //我的
          } else if (type == "bind_mobile") {
             wx.miniProgram.navigateTo({url: "/pages/bindMobile/bindMobile"});//绑定手机
          } else if (type == "edit_face" || type == "edit_origin_sign") {
            wx.miniProgram.navigateTo({url: "/pages/means/means"}); //编辑
          } else if (type == "recharge") {
            wx.miniProgram.navigateTo({url: "/pages/recharge/recharge"}); //充值
          } else if (type == "join_room") {
            wx.miniProgram.navigateTo({url: "/pages/allRoom/allRoom"}); //更多房间
          }
        } else {
          if (type == "send_index") {
            tabIndex = 0
            isIOS ? window.webkit.messageHandlers.selectTabIndex.postMessage({
              tabIndex: tabIndex
            }) : app.selectTabIndex(tabIndex); //首页
          } else if (type == "reply_record") {
            tabIndex = 1
            isIOS ? window.webkit.messageHandlers.selectTabIndex.postMessage({
              tabIndex: tabIndex
            }) : app.selectTabIndex(tabIndex); //动态
          } else if (type == "message") {
            tabIndex = 2
            isIOS ? window.webkit.messageHandlers.selectTabIndex.postMessage({
              tabIndex: tabIndex
            }) : app.selectTabIndex(tabIndex); //消息
          } else if (type == "my_core") {
            tabIndex = 3
            isIOS ? window.webkit.messageHandlers.selectTabIndex.postMessage({
              tabIndex: tabIndex
            }) : app.selectTabIndex(tabIndex); //我的
          } else if (type == "bind_mobile") {
            isIOS ? window.webkit.messageHandlers.bindMobile.postMessage({}) : app.bindMobile() //绑定手机
          } else if (type == "edit_face" || type == "edit_origin_sign") {
            isIOS ? window.webkit.messageHandlers.editData.postMessage({}) : app.editData() //编辑
          } else if (type == "recharge") {
            isIOS ? window.webkit.messageHandlers.pageJumpRecharge.postMessage({}) : app.pageJumpRecharge(); //充值
          } else if (type == "join_room") {
            isIOS ? window.webkit.messageHandlers.morePages.postMessage({}) : app.morePages(); //更多房间
          }
        }
      },
      getTaskPrize(type, taskType) {
        let arys = {
          type: type,
          taskType: taskType
        }; //参数
        let url = "/sign/getTaskPrize";
        this.$.encryption2(arys, url).then((res) => {
          this.index()
          Toast(res.data.text);
        });
      },
      index() {
        var _this = this;
        let arys = {}; //参数
        let url = "/sign/index";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            // this.navList = [];
            this.dailyTaskList = res.data.result.dailyTaskList;
            this.days = res.data.result.days;
            this.totalDays = res.data.result.totalDays;
            this.signList = res.data.result.signList;
            this.exchangePrizeList = res.data.result.exchangePrizeList;
            this.gold = res.data.result.gold;
            this.lotteryPrizeList = res.data.result.lotteryPrizeList;
            this.singleTaskList = res.data.result.singleTaskList;
            this.lotterPrizeLog = res.data.result.lotterPrizeLog;
            this.status_ = res.data.result.status;
            // res.data.result.singleTaskList.forEach(element => {
            //   if (element.status == '0' || element.status == '1') {
            //     _this.navList.push(element)
            //   }
            // });
            res.data.result.openAlert ? this.openAlert = true : this.openAlert = false;
          } else {
            Toast(res.data.text);
          }
        });
      },

    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 4.14) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .FS (@px, @attr: font-size) {
    @vw: (unit(round((@px / 4.14) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .ObtainShells {
    width: 100vw;
    background: #EAEDFF;
    position: relative;
    overflow: hidden;
  }

  .top_header_title {
    position: relative;
    width: 100%;
    .pxToVW(351, height);
    display: flex;
    justify-content: center;

    .poab {
      position: absolute;
      width: 100%;
    }

    .back_ {
      position: absolute;
      .pxToVW(40);
      .pxToVW(40, height);
      .pxToVW(50, top);
      .pxToVW(20, left);
      display: flex;
      align-items: center;

      img {
        .pxToVW(10);
      }
    }

    .explain {
      position: absolute;
      .pxToVW(40);
      .pxToVW(40, height);
      .pxToVW(50, top);
      .pxToVW(20, right);
      display: flex;
      justify-content: flex-end;
      align-items: center;

      img {
        .pxToVW(20);
      }
    }

    .title_center {
      position: absolute;
      .pxToVW(341);
      .pxToVW(78, margin-top);
    }

    .CountingCoupons {
      .pxToVW(195);
      .pxToVW(30, height);
      display: flex;
      align-items: center;
      justify-content: center;
      .pxToVW(18, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFEFF;
      background: #FF8C8C;
      .pxToVW(15, border-radius);
      position: absolute;
      .pxToVW(97, bottom);
    }
  }

  .singnIn {
    .pxToVW(382);
    .pxToVW(350, height);
    .pxToVW(10, border-radius);
    margin: @auto;
    background: #FFFFFF;
    .pxToVW(10, margin-top);


    .sin_top_title {
      display: flex;
      .pxToVW(350);
      .pxToVW(55, height);
      margin: @auto;
      align-items: center;
      justify-content: space-between;

      >span {
        .FS(18);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #080808;
      }

      >div {
        height: 100%;
        display: flex;
        align-items: center;

        span {
          .FS(14);
          .pxToVW(10, padding-right);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
    }

    .sign_list_qd {
      .pxToVW(350);
      .pxToVW(216, height);
      margin: @auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      >div {
        .pxToVW(80);
        .pxToVW(98, height);
        .pxToVW(5, border-radius);
        background: #F8F9FD;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        >span:nth-of-type(1) {
          .FS(13);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
        }

        >span:nth-of-type(2) {
          .FS(14);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
        }

        >img {
          .pxToVW(40);
          .pxToVW(8, margin-top);
          .pxToVW(5, margin-bottom);
        }

        >.img_7 {
          width: 100%;
          display: flex;
          justify-content: space-around;
          .pxToVW(8, margin-top);
          .pxToVW(5, margin-bottom);
          flex-shrink: 0;

          img {
            .pxToVW(40);
            .pxToVW(38, height);
          }

          >div {
            .pxToVW(40);
            .pxToVW(40, height);
            display: flex;
            align-items: center;
            justify-content: center;

            img:nth-of-type(1) {
              position: absolute;
              .pxToVW(65);
              .pxToVW(65, height);
            }

            img:nth-of-type(2) {
              position: absolute;
              .pxToVW(49);
              .pxToVW(38, height);
            }
          }
        }

        .text_7 {
          width: 100%;
          display: flex;
          justify-content: space-around;

          span {
            display: inline-block;
            width: 50%;
            text-align: center;
            .FS(14);
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }
      }

      >div:last-child {
        .pxToVW(170);
      }
    }

    .SignIn {
      .pxToVW(256);
      .pxToVW(48, height);
      .pxToVW(24, border-radius);
      background: #8570FF;
      .FS(18);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FEFEFE;
      margin: @auto;
      .pxToVW(14, margin-top);
      .pxToVW(48, line-height);
      text-align: center;
    }
  }

  .shells {
    .pxToVW(382);
    .pxToVW(58, height);
    margin: @auto;
    .pxToVW(20, margin-top);
    .pxToVW(20, margin-bottom);
    background: #FFFFFF;
    .pxToVW(10, border-radius);

    .box_she {
      .pxToVW(350);
      height: 100%;
      margin: @auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #080808;

      .left_she {
        display: flex;
        height: 100%;
        align-items: center;

        span:nth-of-type(1) {
          .FS(18);
          font-weight: Bold;
        }

        span:nth-of-type(2) {
          .FS(24);
          font-weight: 600;
        }

        img {
          .pxToVW(30);
          .pxToVW(28, height);
          .pxToVW(10, padding-left);
          .pxToVW(10, padding-right);
        }
      }

      .right_she {
        display: flex;
        height: 100%;
        align-items: center;
        color: #000000;

        span {
          .FS(16);
          font-weight: 400;
        }

        img {
          .pxToVW(8);
          .pxToVW(10, padding-left);
        }
      }
    }
  }

  .EarnShells {
    .pxToVW(382);
    margin: @auto;
    background: #FFFFFF;
    .pxToVW(10, border-radius);
    .pxToVW(84, margin-bottom);
    .pxToVW(20, padding-top);
    position: relative;



    .notice {
      .pxToVW(352);
      .pxToVW(34, height);
      margin: @auto;
      .pxToVW(20, margin-top);
      .pxToVW(25, margin-bottom);
      background: #FFECFB;
      .pxToVW(20, border-radius);
      display: flex;
      align-items: center;

      .notice-swipe {
        .pxToVW(34, height);
        .pxToVW(34, line-height);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5C5C5C;
        .FS(14);

        /deep/ .van-swipe-item {
          .pxToVW(34, height) !important;
        }

        /deep/ .van-swipe__track--vertical {
          .pxToVW(340, height) !important;
        }
      }

      img {
        .pxToVW(20);
        .pxToVW(20, height);
        .pxToVW(10, padding-right);
        .pxToVW(18, padding-left);
        flex-shrink: 0;
      }
    }

    .probability {
      .pxToVW(352);
      .pxToVW(20, height);
      margin: @auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      img {
        .pxToVW(7);
        .pxToVW(10, padding-left);
      }

      span {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #080808;
        .FS(14);
      }
    }

    .box_gift {
      .pxToVW(352);
      .pxToVW(204, height);
      margin: @auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(40, margin-top);
      .pxToVW(32, margin-bottom);

      img {
        .pxToVW(262);
        .pxToVW(204, height);
      }

      // lottie {
      //   .pxToVW(262);
      //   .pxToVW(204, height);
      // }
    }

    .btn_xinyun {
      .pxToVW(352);
      .pxToVW(60, height);
      margin: @auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(24, margin-bottom);

      .btn_gift_an {
        .pxToVW(256);
        .pxToVW(50, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/ObtainShells/box_prize_btn.png") no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }

        span:nth-of-type(1) {
          .FS(20);
        }

        span:nth-of-type(2) {
          font-weight: 400;
          .FS(12);
        }
      }
    }

    .srcoly {
      .pxToVW(352);
      .pxToVW(70, height);
      margin: @auto;
      .pxToVW(30, margin-bottom);
      position: relative;
      overflow: hidden;

      .list_prize {
        .pxToVW(352);
        .pxToVW(70, height);
        overflow: hidden;
        overflow-x: scroll;
        display: flex;
        position: absolute;

        .list_box {
          .pxToVW(70);
          .pxToVW(70, height);
          .pxToVW(5, margin-right);
          flex-shrink: 0;
          background: rgba(238, 215, 255, 0.21);
          box-shadow: inset 0px 0px 3px 0px #C26CFE;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          overflow: hidden;

          >img {
            .pxToVW(56);
            .pxToVW(56, height);
            .pxToVW(6, border-radius);
          }

          >div {
            // text-size-adjust: none;
            // -webkit-text-size-adjust: none;
            position: absolute;
            right: -8.5%;
            bottom: -2%;
            border-radius: 6px 0px 6px 0px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            background: #966BF9;
            transform: scale(0.8);

            >div {
              .FS(7);
              margin-right: 2px;
              transform: scale(0.8);
            }
          }
        }
      }

      .list_prize::-webkit-scrollbar {
        display: none
      }

      >img {
        .pxToVW(35);
        .pxToVW(70, height);
        position: absolute;
        .pxToVW(0, right);
      }
    }

    .shop_record {
      width: 100%;
      .pxToVW(32, height);
      .pxToVW(20, margin-bottom);
      background: #FBFCFE;
      display: flex;
      justify-content: space-between;
      align-items: center;

      >span {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #000000;
        .FS(15);
        .pxToVW(25, padding-left);
        .pxToVW(25, padding-right);
      }
    }

    .shop_duih {
      .pxToVW(352);
      margin: @auto;
      display: flex;
      flex-wrap: wrap;

      >div {
        .pxToVW(112);
        .pxToVW(180, height);
        .pxToVW(20, margin-bottom);
        .pxToVW(4, margin-right);

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .gift_value {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #F8F9FD;
          .pxToVW(112);
          .pxToVW(152, height);
          .pxToVW(6, border-radius);

          img {
            .pxToVW(90);
            .pxToVW(90, height);
          }

          span:nth-of-type(1) {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #080808;
            .FS(15);
            .pxToVW(4, padding-top);
            .pxToVW(4, padding-bottom);
          }

          span:nth-of-type(2) {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            .FS(12);
          }
        }

        .value_lis {
          width: 94%;
          .pxToVW(24, height);
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: @auto;

          >div {
            img {
              .pxToVW(17);
              .pxToVW(15, height);
            }

            span {
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #080808;
              .FS(15);
            }
          }

          >span {
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #966BF9;
            .FS(14)
          }
        }

      }
    }

    /deep/ .van-tabs__wrap {
      width: 80%;
      margin: @auto;
    }

    /deep/ .van-tabs__line {
      .pxToVW(20);
      .pxToVW(6, height);
      .pxToVW(24, border-radius);
      background: #8570FF;
    }

    /deep/ .van-tab {
      .pxToVW(20);
      .FS(20);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }

    /deep/ .van-tab--active {
      .FS(22);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #080808;
    }

    .task {
      width: 100%;
      .pxToVW(30, height);
      .pxToVW(20, margin-top);
      .pxToVW(18, margin-bottom);
      .pxToVW(30, line-height);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      .FS(16);
      background: #FBFCFE;

      >span {
        .pxToVW(26, padding-left);
      }

      >div {
        width: 88%;
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span:nth-of-type(2) {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          .FS(13)
        }
      }
    }

    .task_two {
      .pxToVW(20, margin-top);
    }

    .list_task {
      .pxToVW(352);
      margin: @auto;
      overflow: hidden;

      .Singletask {
        width: 100%;
        .pxToVW(54, height);
        .pxToVW(30, margin-bottom);
        display: flex;
        justify-content: space-between;

        .left_rw {
          display: flex;
          align-items: center;

          .icon_one {
            .pxToVW(54);
            .pxToVW(54, height);
            background: #F9F8FF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              .pxToVW(24);
            }
          }

          .center_details {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-around;
            .pxToVW(15, margin-left);

            >span {
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              .FS(15)
            }

            >div {
              display: flex;
              align-items: center;

              img {
                .pxToVW(16);
                .pxToVW(15, height);
                .pxToVW(6, padding-right);
              }

              span {
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #EEA307;
                .FS(13)
              }
            }
          }
        }

        .right_rw {
          height: 100%;
          display: flex;
          align-items: center;

          >div {
            .pxToVW(20, border-radius);
            .pxToVW(74);
            .pxToVW(32, height);
            .FS(14);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
          }

          .status1 {
            background: #FFFDFD;
            border: 1px solid #D8D8D8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000000;
          }

          .status2 {
            color: #FFFFFF;
            background: #8570FF;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .status3 {
            color: #FFFFFF;
            background: #E6E6E6;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666666;
          }
        }
      }
    }


  }

  /deep/ .van-popup {
    overflow: initial;
  }

  .popup_model {
    .pxToVW(350);

    background: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    .pxToVW(10, border-radius);

    .top_model_title {
      .pxToVW(234);
      .pxToVW(68, height);
      position: absolute;
      .pxToVW(-19, top);
      background: url("https://img.xunyinjiaoyou.com/static/activity/ObtainShells/popup_title_frame.png");
      background-size: contain;
      display: flex;
      justify-content: center;
      align-content: center;

      span {
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        .pxToVW(58, line-height);
        .FS(25);
        color: #FFFFFF;
        text-shadow: 0px 2px 4px #5E14C4;
      }
    }

    .center_miaos {
      .pxToVW(300);
      margin: @auto;
      .pxToVW(42, margin-top);
      .pxToVW(24, margin-bottom);
      display: flex;
      flex-direction: column;
      .pxToVW(20, line-height);

      >span {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        .FS(14);
        display: flex;

        span {
          display: flex;
          flex: 1;
        }
      }
    }

    .SystemPrompt {
      .pxToVW(350);
      .pxToVW(325, height);
      margin: @auto;
      display: flex;
      flex-direction: column;

      .ba_img {
        .pxToVW(350);
        .pxToVW(174, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/ObtainShells/popup_xitong_img.png");
        background-size: contain;
        display: flex;
        justify-content: center;

        .mode_lis {
          .pxToVW(290);
          .pxToVW(72, height);
          .pxToVW(76, margin-top);
          .pxToVW(6, border-radius);
          background: rgba(255, 255, 255, 0.52);
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;

          >img {
            position: absolute;
            .pxToVW(28);
            .pxToVW(10, right);
            .pxToVW(10, top);
          }

          >div {
            width: 96%;
            margin: @auto;
            .pxToVW(40, height);
            display: flex;
            align-items: center;

            img {
              .pxToVW(20);
            }

            span {
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #65A3FF;
              .FS(12);
              .pxToVW(4, padding-left);
            }
          }

          >span {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #65A3FF;
            .FS(12);
            .pxToVW(10, padding-left);

          }
        }
      }

      .tips_ {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex: 1;

        >div:nth-of-type(1) {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          .pxToVW(52, height);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          .FS(20);
        }

        span {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 500;
          color: #000000;
          .FS(16);
        }

        >div:nth-of-type(2) {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          .pxToVW(256);
          .pxToVW(48, height);
          .pxToVW(24, border-radius);
          .pxToVW(10, margin-top);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          font-weight: 500;
          color: #FEFEFE;
          background: #8570FF;
          .FS(20);
        }
      }
    }

    .signIn_pirze {
      .pxToVW(350);
      .pxToVW(325, height);
      margin: @auto;
      display: flex;
      flex-direction: column;

      .list_signin_prize {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .one_prize_gift {
          .pxToVW(142);
          .pxToVW(142, height);
          .pxToVW(50, margin-top);
          .pxToVW(12, margin-bottom);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            .pxToVW(142);
            .pxToVW(142, height);
            position: absolute;
          }

          >img:nth-of-type(2) {
            .pxToVW(108);
            position: absolute;
          }
        }

        .luckLo_name {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          .FS(17);
          .pxToVW(30, margin-top);
          .pxToVW(12, margin-bottom);
        }

        .one_prize_gift3 {
          .pxToVW(284);
          .pxToVW(130, height);
          margin: @auto;
          .pxToVW(68, margin-top);
          .pxToVW(28, margin-bottom);
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          >div {
            .pxToVW(80);
            .pxToVW(130, height);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;

            .prize_bj {
              .pxToVW(80);
              .pxToVW(80, height);
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                position: absolute;
              }

              img:nth-of-type(1) {
                width: 100%;
              }

              img:nth-of-type(2) {
                .pxToVW(62);
              }
            }

            >span {
              display: inline-block;
              .pxToVW(40, height);
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 500;
              color: #000000;
              .FS(16);
            }
          }

          >span {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            .FS(12);
          }
        }

        .my_zdl {
          .pxToVW(256);
          .pxToVW(48, height);
          .pxToVW(24, border-radius);
          .pxToVW(48, line-height);
          .pxToVW(12, margin-top);
          .pxToVW(8, margin-bottom);
          background: #8570FF;
          text-align: center;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FEFEFE;
          .FS(18);
        }

        >span:nth-of-type(1) {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 500;
          color: #000000;
          .FS(16);
        }

        >span:nth-of-type(2) {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          .FS(12);
        }

        .name_gift {
          font-weight: 400 !important;
          color: #666666 !important;
          .FS(12) !important;
        }

      }
    }

    .model_close {
      position: absolute;
      .pxToVW(40);
      .pxToVW(40, height);
      .pxToVW(-90, bottom);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .conchLog {
      .pxToVW(350);
      .pxToVW(400, height);
      margin: @auto;
      display: flex;
      flex-direction: column;

      .labe_header {
        .pxToVW(330);
        .pxToVW(30, height);
        margin: @auto;
        background: #E2DAFF;
        .pxToVW(6, border-radius);
        .pxToVW(38, margin-top);
        .pxToVW(15, margin-bottom);
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-shrink: 0;

        span {
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          .FS(16);
          display: inline-block;
          width: 50%;
          height: 100%;
          text-align: center;
          .pxToVW(30, line-height);
        }

      }

      .list_con1 {
        overflow-y: scroll;
        .pxToVW(350);
        .pxToVW(300, height);
        margin: @auto;

        .list_conlog {
          .pxToVW(330);
          margin: @auto;
          .pxToVW(15, margin-bottom);
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            display: inline-block;
            text-align: center;
            width: 33%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            .FS(14);
          }
        }
      }

      .NoDatamy_exchange {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
          .pxToVW(92);
          .pxToVW(84, height);
          .pxToVW(100, margin-top);
          .pxToVW(10, margin-bottom);
        }

        span {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          .FS(10);
        }
      }
    }

    .probability_ {
      .pxToVW(350);
      .pxToVW(400, height);
      margin: @auto;
      display: flex;
      flex-direction: column;

      .labe_header {
        .pxToVW(330);
        .pxToVW(30, height);
        margin: @auto;
        background: #E2DAFF;
        .pxToVW(6, border-radius);
        .pxToVW(38, margin-top);
        .pxToVW(15, margin-bottom);
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-shrink: 0;

        span {
          display: inline-block;
          width: 50%;
          text-align: center;
          .pxToVW(30, line-height);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          .FS(16);
        }

      }

      .list_con1 {
        overflow-y: scroll;
        .pxToVW(350);
        .pxToVW(300, height);
        margin: @auto;

        .list_conlog {
          .pxToVW(330);
          margin: @auto;
          .pxToVW(15, margin-bottom);
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            display: inline-block;
            text-align: center;
            width: 50%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            .FS(14);
          }
        }
      }
    }

    .myPrize {
      .pxToVW(350);
      .pxToVW(445, height);
      margin: @auto;
      display: flex;
      flex-direction: column;
      align-items: center;

      .active_tab {
        .pxToVW(260);
        .pxToVW(45, height);
        .pxToVW(8, border-radius);
        .pxToVW(38, margin-top);
        .pxToVW(20, margin-bottom);
        overflow: hidden;
        background: #F3EFFF;
        display: flex;
        align-items: center;

        .active_ {
          background: #8570FF;
          color: #FFFFFF;
        }

        >div {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #5E5E5E;
          .FS(17);
        }
      }

      .labe_header {
        .pxToVW(330);
        .pxToVW(30, height);
        margin: @auto;
        background: #E2DAFF;
        .pxToVW(6, border-radius);
        .pxToVW(15, margin-bottom);
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-shrink: 0;

        span {
          display: inline-block;
          width: 50%;
          text-align: center;
          .pxToVW(30, line-height);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          .FS(16);
        }

      }

      .list_con1 {
        overflow-y: scroll;
        .pxToVW(350);
        .pxToVW(300, height);
        margin: @auto;

        .list_conlog {
          .pxToVW(330);
          margin: @auto;
          .pxToVW(15, margin-bottom);
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            display: inline-block;
            text-align: center;
            width: 50%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            .FS(14);
          }
        }
      }
    }
  }

  .poab_myPrize {
    position: fixed;
    .pxToVW(60, bottom);
    .pxToVW(0, right);
    .pxToVW(94);
    .pxToVW(38, height);
    background: #8570FF;
    border-radius: 24px 0px 0px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    .FS(16);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  /deep/ .van-tab__text--ellipsis {
    overflow: visible;
  }
</style>